<template>
  <ul class="news-list">
    <li>编号：{{ id }}</li>
    <li>标题：{{ title }}</li>
    <li>内容：{{ content }}</li>

    <li>编号：{{ route.params.id }}</li>
    <li>标题：{{ route.params.title }}</li>
    <li>内容：{{ route.params.content }}</li>
  </ul>
</template>
<script setup lang="ts" name="DetailParamsDemo3">
// route.params.id能更新id不能更新(2024120401) 已经记录在案
  import {toRefs} from 'vue'
  /*
  * 从 Vue 导入 toRefs，这个方法用于将响应式对象转换为普通对象的引用，
  * 从而允许对象的属性在模板中直接使用，而不需要手动解构。
  * */
  import {useRoute,useRouter} from 'vue-router'
  /*
  * 从 vue-router 导入 useRoute，这是一个 Vue Router 提供的钩子函数，用于获取当前路由的状态（如路径、查询参数等）。
  * */
  const route = useRoute()
  const router = useRouter()
  console.log("DetailParams.vue文件===",route)
  /*
  * 使用 useRoute 获取当前路由的对象，并将其保存在 route 变量中。
  * 这个对象包含了路由的各种信息，例如路由路径、查询参数、路由元数据等。
  * */
  // 解构 route.params 中的 id、title 和 content
  let { id,title,content } = route.params
  console.log("route.query",route.query)
  console.log("route.params",route.params)
  console.log("route.fullPath",route.fullPath)
  console.log("router.push",router.push)
  console.log("router.replace",router.replace)
</script>
<style scoped>
  .news-list {
    list-style: none;
    padding-left: 20px;
  }
  .news-list>li {
    line-height: 30px;
  }
</style>